<template>
    <div>
        <van-nav-bar
        title="写动态"
        left-text="返回"    
        right-text="发表"
        left-arrow
        @click-left="onClickLeft"
        @click-right="addDynamic"
        />
        <van-field
        v-model="message"
        rows="6"
        autosize
        type="textarea"
        placeholder="请输入这一刻的想法"
        :error-message="messageError"
        />
        <div class="dy_radio">
            <span>请选择动态的状态</span>
            <van-radio-group v-model="radio">
                <van-cell-group>
                    <van-cell title="公开" clickable @click="radio = '0'">
                        <template #right-icon>
                            <van-radio name="0" />
                        </template>
                    </van-cell>
                    <van-cell title="仅自己可见" clickable @click="radio = '1'">
                        <template #right-icon>
                            <van-radio name="1" />
                        </template>
                    </van-cell>
                </van-cell-group>
            </van-radio-group>
        </div>
        
    </div>
</template>

<script>
    import axios from 'axios'
    import { Toast } from 'vant'
    export default {
        data(){
            return {
                radio : '0',
                message : '',
                userName: null,
                userID: null,
                messageError: '',
            }
        },
        created(){
            if(localStorage.userInfo){
                let userInfo = JSON.parse(localStorage.userInfo)
                this.userName = userInfo.userName
                this.userID = userInfo.userId
                // console.log(userInfo);
            }
        },
        mounted(){
            this.$store.dispatch('HIDENAV')
            // console.log("1111111111");
        },
        destroyed(){
            this.$store.dispatch('SHOWNAV')
        },
        methods:{
            axiosAddDynamic(){
                // this.openLoad = true;
                    axios({
                        url: 'http://localhost:3000/dynamic/add',
                        method: 'post',
                        data:{
                            userName:this.userName,
                            userID:this.userID,
                            content: this.message,
                            status: this.radio,
                        }
                    }).then(response =>{
                        this.$router.push({ path:'/find' })
                        console.log(response);
                    })
            },
            addDynamic(){
                this.checkForm()&&this.axiosAddDynamic()
            },
            onClickLeft(){
                this.$dialog.confirm({
                    title: '',
                    message: '是否退出此次编辑',
                })
                .then(() => {
                    this.$router.go(-1);
                })
                .catch(() => {
                    // on cancel
                })              
            },
            //****表单验证方法
            checkForm(){
                let isOk = true
                if(this.message.length<1){
                    this.messageError = "动态内容不能为空"
                    isOk=false
                }else{
                    this.messageError = ''
                } 
                return isOk
            }
        //     onClickRight() {
        //         Toast.success('按钮');
        //    },
        } 
    }
</script>

<style lang="scss" scoped>
    .dy_radio {
        text-align: left;
        margin-left: .2rem;
    }
</style>